<template>
  <div class="right3">
    <div class="bt">
      <div class="tit1">{{ title }}</div>
    </div>
    <div class="rightThree" ref="chartRef"></div>
  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from "echarts";

const title = "农田面积变化"

const chartRef = ref(null);
onMounted(() => {
  const chart = echarts.init(chartRef.value);
  const option = {
    xAxis: {
      type: 'category',
      data: ['2019', '2020', '2021', '2022', '2023']
    },
    grid: {left: "5%", top: "20%", bottom: "15%", right: "10%", containLabel: true},
    yAxis: {
      name: '单位：万亩',
      nameTextStyle: {
        color: 'white'
      },
      axisLabel: {
        color: '#fff'
      },
      type: 'value'
    },
    series: [
      {
        data: [983, 1080, 1065, 1101, 1000],
        type: 'bar',
        barWidth: '50%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: '#83bff6'},
            {offset: 0.5, color: '#188df0'},
            {offset: 1, color: '#188df0'}
          ])
        },
      }
    ]
  };
  chart.setOption(option);
})
</script>

<style lang="scss" scoped>
.right3 {
  width: 25%;
  height: calc(100% / 3 - 57px);
  background-image: url("@/assets/img/backg1.png");
  background-size: 100% 100%;
  position: fixed;
  top: calc(100% / 3 + 100% / 3 + 24px);
  float: left;
}

.bt {
  width: calc(100% - 24px);
  height: 40px;
  margin-left: 24px;
  float: left;
  line-height: 40px;
}

.tit1 {
  width: auto;
  height: 40px;
  padding-right: 4px;
  font-size: 13px;
  font-weight: bold;
  background: linear-gradient(to top, #78bcf7, #f9fcff);
  -webkit-background-clip: text;
  color: transparent;
  float: left;
  /*定义文本颜色为透明*/
}

.rightThree {
  height: 100%;
  margin: 25px auto auto auto;
  width: 105%
}
</style>